<template>
    <div class="login_container">
        <div class="login_form">
            <icon-svg name="car"></icon-svg>
            <xkl-form :form="form">
                <template #__action>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" @click="login">
                            登录
                        </van-button>
                    </div>
                </template>
            </xkl-form>
        </div>
    </div>
</template>
<script setup lang="ts">
import LoginService from '~/service/login';
import Login from '@h5/entity/login';
import { onBeforeMount } from 'vue';
import useGlobal from '~/utils/g';

const $ = useGlobal()

const loginService = new LoginService()

const form = new Login().active

const login = () => {
    form.submit(async (done) => {
        const res = await loginService.login(form)
        if (res.code === 200) {
            $.router.replace('/home')
        }
        done()
    })

}

const getCaptcha = async () => {
    const res = await loginService.getCaptcha({})
    console.log(res);
}

onBeforeMount(() => {
    getCaptcha()
})



</script>

<style lang="scss" scoped>
.login_container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .login_form {
        width: 300px;
    }
}
</style>